#study {
    background: #FAFAFA;
    .header {
        background: white;
        padding: .2rem .32rem;
        border-bottom: 1px solid #FAFAFA;
        display: flex;
        align-items: center;
        .header_label {
            font-size: .44rem;
            line-height: .64rem;
            color: #333333;
        }
        .header_left {
            margin: 0 .32rem;
            flex: 1;
            position: relative;
            z-index: 8;
            img {
                width: .33rem;
                height: .33rem;
                position: absolute;
                z-index: 9;
                left: .2rem;
                top: 0;
                bottom: 0;
                margin: auto;
            }
            .input_btn {
                display: flex;
                align-items: center;
                width: 100%;
                border-radius: 1rem;
                background: #F7F7F7;
                border: none;
                height: .64rem;
                font-size: .3rem;
                color: #999999;
                padding-left: .62rem;
            }
            input {
                width: 100%;
                border-radius: 1rem;
                background: #F7F7F7;
                border: none;
                height: .64rem;
                font-size: .3rem;
                line-height: .4rem;
                color: #333333;
                padding-left: .62rem;
            }
        }
        .header_right {
            position: relative;
            z-index: 8;
            i {
                display: block;
                width: .2rem;
                height: .2rem;
                border-radius: 50%;
                background: #FF3B30;
                position: absolute;
                right: -0.05rem;
                top: -.02rem;
            }
            img {
                width: .5rem;
                height: .5rem;
            }
        }
    }
    .content {
        background: white;
        .yd-list-donetip{
            background: white;
        }
        .title {
            padding: .3rem .32rem;
            .live_title {
                display: flex;
                align-items: center;
                height: .48rem;
                justify-content: space-between;
                color: #333333;
                font-size: .4rem;
                font-weight: 700;
                margin-bottom: .08rem;
                .live_right {
                    font-weight: 500;
                    font-size: .28rem;
                    color: #999999;
                    display: flex;
                    align-items: center;
                    img {
                        width: .3rem;
                        height: .3rem;
                        margin-right: .08rem;
                    }
                    span {
                        color: #35BF7E;
                        font-size: .28rem;
                    }
                }
            }
            .title_label {
                font-size: .26rem;
                line-height: .48rem;
                color: #999999;
            }
        }
        
        .course_video {
            border-bottom: .2rem solid #FAFAFA;
            .img_nav {
                display: flex;
                justify-content: space-between;
                padding: 0 .32rem;
                margin-bottom: .26rem;
                img {
                    border-radius: .1rem;
                    width: 3.3rem;
                    height: 1.32rem;
                    margin-right: .25rem;
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
            .class_nav {
                border-bottom: .2rem solid #FAFAFA;
                padding: 0 .29rem .24rem .29rem;
                display: flex;
                flex-wrap: wrap;
                .nav_item {
                    font-size: .26rem;
                    color: #333333;
                    margin: 0 .198rem .24rem 0;
                    width: 1.58rem;
                    height: .6rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #F0F0F0;
                    color: #333333;
                    border-radius: .3rem;
                    &:nth-child(4n) {
                        margin-right: 0;
                    }
                }
            }
        }
        
        .live_list {
            padding: 0 .32rem 0 .32rem;
            .list {
                margin: 0 .02rem .64rem .02rem;
                padding: .32rem;
                border-radius: .1rem;
                box-shadow: 0px .04rem .2rem 0px rgba(0, 0, 0, 0.08);
                .list_header {
                    display: flex;
                    margin-bottom: .32rem;
                    align-items: center;
                    .list_header_top {
                        padding: 1px;
                        overflow: hidden;
                        flex: 1;
                        display: flex;
                        align-items: center;
                        .list_header_top_img {
                            border-radius: 50%;
                            width: .72rem;
                            height: .72rem;
                            margin: 1px .16rem 1px 1px;
                        }
                        span {
                            line-height: inherit;
                            flex: 1;
                            padding-right: .2rem;
                            color: #333333;
                            font-weight: 500;
                        }
                    }
                    //这种垂直居中的在安卓一直有问题，日他大爷的，
                    .list_header_bottom {
                        //                  height: .5rem;
                        width: 1.6rem;
                        padding: .06rem 0;
                        //                      background: linear-gradient(135deg, rgba(255, 129, 39, 1) 0%, rgba(254, 67, 135, 1) 100%);
                        background: #35BF7E;
                        border-radius: 1rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .list_header_bottom_img {
                            width: .25rem;
                            height: .25rem;
                            margin-right: .085rem;
                        }
                        span {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: white;
                            font-size: .26rem;
                            //                      line-height: .37rem;//这里用这个安卓机出问题，所以用下面的定死高度
                            height: .37rem;
                        }
                    }
                }
                .list_title {
                    overflow: hidden;
                    font-size: .32rem;
                    margin: 0 0 .16rem 0;
                }
                .list_bottom {
                    color: #999999;
                    font-size: .28rem;
                    line-height: .4rem;
                    .list_bottom_password {
                        display: flex;
                        span {
                            flex: 1;
                            padding-right: .2rem;
                        }
                        .password_paly {
                            font-size: .28rem;
                            line-height: .4rem;
                        }
                    }
                }
            }
        }
    }
    .pop_nike_name {
        width: 5.4rem;
        border-radius: .24rem;
        background: white;
        .title {
            font-weight: 700;
            padding: .3rem 0 .4rem 0;
            text-align: center;
        }
        .pop_nike_name_input {
            width: 4.74rem;
            border-radius: .04rem;
            border: 1px solid rgba(230, 230, 230, 1);
            margin: 0 auto .34rem;
            input {
                width: 100%;
                border: none;
                height: .6rem;
                font-size: .26rem;
                line-height: .37rem;
                padding: 0 .16rem;
            }
        }
        ul {
            border-top: 1px solid #E6E6E6;
            display: flex;
            font-weight: 500;
            li {
                color: #999999;
                padding: .2rem 0 .16rem 0;
                width: 50%;
                text-align: center;
                border-right: 1px solid #E6E6E6;
                &:last-child {
                    border-right: none;
                    color: #35BF7E;
                }
            }
        }
    }
    .yd-popup-bottom {
        height: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, .2);
        .yd-popup-content {
            position: absolute;
            left: 0;
            right: 0;
            top: 35%;
            margin: auto;
        }
    }
    .pop_content {
        background: white;
        width: 5.6rem;
        background-size: contain;
        border-radius: .2rem;
        //      border:1px solid rgba(151,151,151,1);
        margin: auto;
        text-align: center;
        .pop_top {
            padding: .4rem .55rem .31rem .55rem;
            .pop_title {
                font-size: .36rem;
                line-height: .5rem;
                color: #333333;
            }
            .pop_label {
                color: #999999;
                font-size: .28rem;
                line-height: .4rem;
                margin: .16rem 0 .32rem 0;
            }
            .pop_input_f {
                position: relative;
                width: 100%;
                height: .72rem;
                text-align: center;
                color: #333333;
                border-radius: .1rem;
                border: 1px solid rgba(153, 153, 153, 1);
                margin-bottom: .32rem;
                .pop_input {
                    color: #333333;
                    width: 100%;
                    outline: none;
                    border: none;
                    font-size: .34rem;
                    text-align: center;
                    width: 100%;
                    height: 100%;
                    display: block;
                    padding: .2rem;
                    line-height: .42rem;
                }
                input::-webkit-input-placeholder,
                textarea::-webkit-input-placeholder {
                    color: #999999;
                    font-weight: 500;
                }
                textarea:-moz-placeholder,
                input:-moz-placeholder {
                    color: #999999;
                    font-weight: 500;
                }
                textarea::-moz-placeholder,
                input::-moz-placeholder {
                    color: #999999;
                    font-weight: 500;
                }
                textarea:-ms-input-placeholder,
                input:-ms-input-placeholder {
                    color: #999999;
                    font-weight: 500;
                }
            }
        }
        .pop_btn {
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #E6E6E6;
            height: .87rem;
            font-size: .34rem;
            .pop_btn_left,
            .pop_btn_right {
                width: 50%;
                height: 100%;
                color: #35BF7E;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .pop_btn_left {
                color: #999999;
                border-right: 1px solid #E6E6E6;
            }
        }
    }
}